<!DOCTYPE html>
<html lang="zxx" class="no-js" th:lang="${lang}" xmlns:th="http://www.thymeleaf.org">

<head>
  <!-- Mobile Specific Meta -->
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <!-- Favicon -->
  <link rel="shortcut icon" href="img/fav.png" th:href="@{/img/fav.png}"/>
  <!-- Author Meta -->
  <meta name="author" content="" th:content="${author}"/>
  <!-- Meta Description -->
  <meta name="description" content="" th:content="${description}"/>
  <!-- Meta Keyword -->
  <meta name="keywords" content="" />
  <!-- meta character set -->
  <meta charset="UTF-8" />
  <!-- Site Title -->
  <title>首页-远程文件浏览器</title>
  <!--
      CSS
      =============================================
    -->
  <link rel="stylesheet" th:href="@{${cssHref}}" th:each="cssHref:${cssHrefList}">
</head>

<body>
  <!-- ================ Start Header Area ================= -->
  <header class="default-header">
    <nav class="navbar navbar-expand-lg  navbar-light">
      <div class="container">
        <a class="navbar-brand" href="index.html" th:href="@{${navs.home.link}}">
          <img src="img/logo.png" alt="" th:src="@{${logo}}"/>
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="lnr lnr-menu"></span>
        </button>

        <div class="collapse navbar-collapse justify-content-end align-items-center" id="navbarSupportedContent">
          <ul class="navbar-nav">
            <li><a href="index.html" th:href="@{${navs.home.link}}" th:text="${navs.home.name}">Home</a></li>
            <li><a href="about.html" th:href="@{${navs.about.link}}" th:text="${navs.about.name}">About</a></li>
            <li><a href="courses.html" th:href="@{${navs.browse.link}}" th:text="${navs.browse.name}">Browse</a></li>
            <!-- Dropdown -->
            <li class="dropdown" th:if="${directory != null}">
              <a class="dropdown-toggle" href="#" data-toggle="dropdown">
                切换浏览模式
              </a>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="elements.html" th:href="@{'/directory/'+${directory.id}}">普通模式</a>
                <a class="dropdown-item" href="course-details.html" th:href="@{'/images/'+${directory.id}}">图片浏览模式</a>
              </div>
            </li>
            <li class="dropdown">
              <a class="dropdown-toggle" href="#" data-toggle="dropdown">
                Blog
              </a>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="blog-home.html">Blog Home</a>
                <a class="dropdown-item" href="blog-single.html">Blog Details</a>
              </div>
            </li>
            <li><a href="contacts.html">Contacts</a></li>

            <li>
              <button class="search">
                <span class="lnr lnr-magnifier" id="search"></span>
              </button>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="search-input" id="search-input-box">
      <div class="container">
        <form class="d-flex justify-content-between">
          <input type="text" class="form-control" id="search-input" placeholder="Search Here" />
          <button type="submit" class="btn"></button>
          <span class="lnr lnr-cross" id="close-search" title="Close Search"></span>
        </form>
      </div>
    </div>
  </header>
  <!-- ================ End Header Area ================= -->

  <!-- ================ start banner Area ================= -->
  <section class="banner-area">
    <div class="container">
      <div class="row justify-content-center align-items-center">
        <div class="col-lg-12 banner-right">
          <h1 class="text-white">
            远程文件浏览器
          </h1>
          <p class="mx-auto text-white  mt-20 mb-40">
            NetFiles远程文件浏览器是一款小巧的远程文件浏览器，将它部署到服务器后，客户端可拥有远程浏览服务器文件的能力。
          </p>
          <div class="link-nav">
                        <span class="box">
                            <a href="index.html" th:href="@{#roots}">分区列表 </a>
                            <i class="lnr lnr-arrow-right"></i>
                            <a href="courses.html" th:href="@{#files}">文件列表</a>
                            <i class="lnr lnr-arrow-right"></i>
                            <!--<a href="course-details.html" th:href="@{#}">页面底部</a>-->
                        </span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ================ Start Feature Area ================= -->
  <section class="feature-area">
    <div class="container-fluid">
      <div class="feature-inner row">
        <div class="col-lg-2 col-md-6">
          <div class="feature-item d-flex">
            <i class="ti-book"></i>
            <div class="ml-20">
              <h4 th:text="${features[0].title}">New Classes</h4>
              <p th:text="${features[0].content}">
                In the history of modern astronomy, there is probably no one greater leap forward.
              </p>
            </div>
          </div>
        </div>
        <div class="col-lg-2 col-md-6">
          <div class="feature-item d-flex">
            <i class="ti-cup"></i>
            <div class="ml-20">
              <h4 th:text="${features[1].title}">Top Courses</h4>
              <p th:text="${features[1].content}">
                In the history of modern astronomy, there is probably no one greater leap forward.
              </p>
            </div>
          </div>
        </div>
        <div class="col-lg-2 col-md-6">
          <div class="feature-item d-flex border-right-0">
            <i class="ti-desktop"></i>
            <div class="ml-20">
              <h4 th:text="${features[2].title}">Full E-Books</h4>
              <p th:utext="${features[2].content}">
                In the history of modern astronomy, there is probably no one greater leap forward.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- ================ End Feature Area ================= -->

  <section class="course-details-area section-gap">
    <div class="container">
      <div class="row">
        <div  id="roots" class="col-lg-4 right-contents">
          <h4 class="title">分区列表</h4>
          <ul>
            <li th:each="root:${roots}">
              <a class="justify-content-between d-flex" href="#" th:href="@{'/directory/'+${root.id}}">
                <p th:text="${root.name}">Trainer’s Name</p>
                <span class="or">浏览</span>
              </a>
            </li>
          </ul>
        </div>

        <div id="files"  class="col-lg-8 course-details-left">
          <div class="content-wrapper">
            <h4 class="title">文件列表</h4>
            <div class="content">
              <ul class="course-list" th:if="${directory} != null">
                <li class="justify-content-between d-flex" th:if="${childDirectory} != null" th:each="childDirectory : ${directory.directories}">
                  <p th:text="${childDirectory.name}">Introduction Lesson</p>
                  <a class="btn text-uppercase" href="#" th:href="@{'/directory/'+${childDirectory.id}}">进入</a>
                </li>
                <li class="justify-content-between d-flex" th:if="${childFile} != null" th:each="childFile : ${directory.files}">
                  <p th:text="${childFile.name}">Introduction Lesson</p>
                  <a class="btn text-uppercase" href="" th:if="${childFile.fileType} == 'image'" th:href="@{'/image/'+${childFile.id}+'#files'}">查看图片</a>
                  <a class="btn text-uppercase" href="" th:if="${childFile.fileType} == 'video'" th:href="@{'/video/'+${childFile.id}+'#files'}">查看视频</a>
                  <a class="btn text-uppercase" href="" th:if="${childFile.fileType} == 'text'" th:href="@{'/text/'+${childFile.id}+'#files'}">查看文本</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!--================ End Course Details Area =================-->

  <script src="" th:src="@{${scriptSrc}}" th:each="scriptSrc: ${scriptSrcList}"></script>
<script>
  $($.ajax({

  }))
</script>
</body>
</html>